/*
* @Author: syq
* @Date:   2017-12-05 10:54:36
* @Last Modified by:   shenyanqiu
* @Last Modified time: 2017-12-05 17:47:19
*/
import React from 'react';
import { Table, Button, Modal } from 'antd';
import { Link } from 'react-router-dom';
import moment from 'moment';
import styles from './List.less';

const confirm = Modal.confirm;


class List extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };
  onSelectChange = (selectedRowKeys) => {
    const { getCheckbox } = this.props;
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    getCheckbox(selectedRowKeys);
  };
  _getColumnConfig () {
    const { onDeleteItem, onSeeItem } = this.props;
    const btnClickHandler = (record, handleType) => {
      handleType === 'see' && onSeeItem(record._id);
      handleType === 'delete' && confirm({
        title: '你确定要删除本条记录？',
        okType: 'danger',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          onDeleteItem(record._id);
        },
      });
    };
    return [{
      title: '内容',
      dataIndex: 'title',
      rowKey: 'title',
      render: (text, record) => {
        return (
          <Link to={`activityDetails/${record._id}`} className={styles.linkstyle}>
            <div className={styles.title}>{record.title}</div>
            <div className={styles.content}>{record.description}</div>
          </Link>
        );
      },
    }, {
      title: '时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text, record) => {
        return (
          <div>
            {
              moment(record.createTime).format("YYYY-DD-MM HH:mm:ss")
            }
          </div>
        );
      },
    }, {
      title: '操作',
      key: 'operation',
      width: 150,
      render: (text, record) => {
        return (<div className={styles.operationArea}>
          <Button type="primary" size={'small'} onClick={() => btnClickHandler(record, 'see')}>查看</Button>
          <Button type="danger" size={'small'} onClick={() => btnClickHandler(record, 'delete')}>删除</Button>
        </div>);
      },
    }];
  }
  render () {
    const { ...tableProps } = this.props;
    const rowSelection = {
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      onSelection: this.onSelection,
    };
    return (
      <Table
        {...tableProps}
        rowSelection={rowSelection}
        columns={this._getColumnConfig()}
        rowKey={record => record._id}
        className={styles.tablebgc}
      />
    );
  }
}

export default List;
